<template>
  <div class="filter-module">
    <RangeFilter
      v-if="['inputRange', 'inputRadioRange'].includes(filterItem.type)"
      v-model="paramsObj"
      :is-show-range-select="filterItem.type === 'inputRadioRange'"
      :item="filterItem" />
    <DateFilter
      v-if="['date', 'rangeDate'].includes(filterItem.type)"
      v-model="paramsObj"
      :item="filterItem" />
    <filterSelect
      v-if="selectKeyType.includes(filterItem.type)"
      v-model="paramsObj"
      :item="filterItem"
      @selectChange="handleSelectValChange" />
    <el-input
      v-if="['input'].includes(filterItem.type)"
      v-model="paramsObj[filterItem.keyword]"
      :placeholder="filterItem.placeholder || '请输入内容'"
      :type="filterItem.inputType || 'text'"
      :maxlength="filterItem.lengthLimit ? (filterItem.maxLength || 100) : null"
      class="width240"
      style="font-size: 13px;"
      size="small"
      clearable
      @keyup.enter.native="queryClick"
      @change="handelInputChange"
      @dblclick.native="handleDoubleClick($event, filterItem)"
      @input="numInputChange($event, filterItem)"/>
    <CostTypePrice
      v-if="['costType'].includes(filterItem.type)"
      v-model="paramsObj"
      :item="filterItem"
    />
  </div>
</template>
<script>
import Title from '@/components/Title';
import RangeFilter from './rangeFilter';
import filterSelect from '@/components/Tool/select.vue';
import filterInput from '@/components/Tool/input.vue';
import DateFilter from './dateFilter.vue';
import CostTypePrice from './costTypePrice';
import { mapState } from 'vuex';
export default {
  components: { Title, DateFilter, filterSelect, filterInput, CostTypePrice, RangeFilter },
  model: {
    prop: 'paramsObj',
    event: 'changeVal'
  },
  props: {
    paramsObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    filterItem: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      selectKeyType: ['select', 'cascaderSelectWithChild', 'cascaderSelect', 'mulSelect',
        'loadMoreSelect', 'regionSelect', 'addressSelect']
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    queryClick() {
      this.$emit('queryClick');
    },
    handelInputChange() {
      this.$emit('handelInputChange');
    },
    handleDoubleClick(e, item) {
      if (item.doubleClick) {
        const fillValue = item.fillValue || this.userInfo.userName;
        this.$set(this.paramsObj, item.keyword, fillValue);
      }
    },
    numInputChange(text, item) {
      let value = text;
      if (['number', 'pureNumber'].includes(item.inputType)) {
        value = text.replace(/[^\d.]/g, '');
      }
      if (item.inputType === 'number' && (item.min || item.min === 0)) {
        if (value > 999999999999) {
          value = 999999999999;
        }
        if (value < item.min) {
          value = item.min;
        }
      }
      if (item.inputType === 'pureNumber') {
        value = value.replace(/\.|^0/g, '');
      }
      value = value === '' ? null : value;
      this.paramsObj[item.keyword] = value;
    },
    handleSelectValChange() {
      const mulSelect = this.filterItem.type === 'mulSelect';
      const isMulEmpty = mulSelect && this.paramsObj[this.filterItem.keyword] && (this.paramsObj[this.filterItem.keyword].length === 0);
      const isSingleEmpty = !mulSelect && !this.paramsObj[this.filterItem.keyword] && this.paramsObj[this.filterItem.keyword] !== 0;
      if (isMulEmpty || isSingleEmpty) {
        delete this.paramsObj[this.filterItem.keyword];
        this.$emit('changeVal', this.paramsObj);
      }
      this.$emit('handelSelectChange', { item: this.filterItem });
    }
  }
};
</script>
<style lang="scss" scoped>

@mixin placeholder($color) {
  &::-webkit-input-placeholder { /* WebKit browsers */
    color: $color !important;
    font-size: 14px;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $color !important;
    font-size: 14px;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $color !important;
    font-size: 14px;
  }
}
.filter-module {
  &::v-deep {
    .custom-mul-select .el-select__tags>span {
      max-width: 100% !important;
    }
    .cascader-tags .el-tag>span {
      max-width: 100px !important;
    }
    .filter-tool-select-item,.filter-tool-width130 {
      margin-bottom: 0;
      margin-right: 0 !important;
      width: 240px !important;
       .el-select__tags .el-tag>span {
        max-width: 150px !important;
       }
       .el-select__tags .el-tag.el-tag--info .el-tag__close {
        top: 3px !important;
       }
      .el-cascader, .el-select{
        width: 240px !important;
        .el-input,.el-input__inner {
          width: 240px !important;
        }
        input {
          @include placeholder(#ddd);
        }
      }
    }
    .el-input__inner {
      @include placeholder(#ddd);
    }
  }
}
.width240 {
  width: 240px !important;
  &::v-deep {
    .el-input,.el-input__inner,.el-textarea__inner {
      width: 240px !important;
    }
  }
}

</style>
